import React from 'react';
import {connect} from 'dva/index';
import {Link} from 'dva/router'
import {Breadcrumb, Dropdown, Form, Icon, Layout, Menu, TreeSelect} from 'antd';
import '../assets/iconfont/iconfont.css'
import '../components/common/resources/overwrite.less'
import './app.css'
import UserInfo from '../components/common/UserInfo'
import ResetPassword from '../components/common/ResetPassword'
import Constants from '../utils/Constants';

const { Header, Footer, Sider, Content } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;
const R = require("ramda");
const TreeNode = TreeSelect.TreeNode;

export default connect(({ app, login, organization, role }) => ({ app, login, organization, role }))(
    class App extends React.Component {
        constructor(props) {
            super(props);
        }

        itemRender = (route, params, routes, paths) => <span>{route.name}</span>;


        handleOpenResetPassword = () => {
            this.resetPassword.handleOpen();
        }

        handleOpenUserInfo = () => {
            this.props.dispatch({ type: 'app/getUserInfo' });
            this.userInfo.handleOpen();
        }

        render() {
            let dropdownMenus =
                <Menu>
                    <Menu.Item key="1"><a href="#" onClick={this.handleOpenResetPassword.bind(this)}>修改密码</a></Menu.Item>
                    <Menu.Divider />
                    <Menu.Item key="2"><a href="#" onClick={this.handleOpenUserInfo.bind(this)}>用户信息</a></Menu.Item>
                    <Menu.Divider />
                    <Menu.Item key="3"><Link to={"/logout"}>退出登录</Link></Menu.Item>
                </Menu>

            let menus = R.isNil(this.props.app.menus) ? [] : this.props.app.menus;
            let selectMenus = [];
            let selectOpenMenu = [];
            let openTopMenu = [];

            let sideMenus = (() => {
                for (let i = 0; i < menus.length; i++) {
                    let menu = menus[i];
                    if (menu.children.length > 0) {
                        for (let j = 0; j < menu.children.length; j++) {
                            let smenu = menu.children[j];
                            if (location.pathname.includes(smenu.url)) {
                                selectMenus = [smenu.menuId + ""];
                                openTopMenu = [menu.menuId + ""];
                                return menu.children;
                            } else {
                                for (let k = 0; k < smenu.children.length; k++) {
                                    let tmenu = smenu.children[k];
                                    if (location.pathname.includes(tmenu.url)) {
                                        selectMenus = [smenu.menuId + "", tmenu.menuId + ""];
                                        selectOpenMenu = [smenu.menuId];
                                        openTopMenu = [menu.menuId + ""];
                                        return menu.children;
                                    }
                                }
                            }
                        }
                    }
                }
                return [];
            })();

            return (
                <div>
                    <Layout className="components-layout-demo-top-side-2">
                        <Header style={{ padding: '0 15px' }}>
                            <div style={{ float: 'left', fontSize: '20px', color: '#ccc808' }}>
                                <Icon type="global" />
                                <span style={{ marginLeft: 5 }}>洲博通物流系统</span>
                            </div>
                            <div style={{ float: 'right', color: '#ccc808' }}>
                                <Dropdown overlay={dropdownMenus} trigger={['click']}>
                                    <a className="ant-dropdown-link" href="#">
                                        {sessionStorage.getItem(Constants.USER_NAME)} <Icon type="down" />
                                    </a>
                                </Dropdown>
                            </div>
                            <Menu
                                theme="dark"
                                mode="horizontal"
                                defaultSelectedKeys={openTopMenu}
                                style={{ lineHeight: '64px' }}
                            >
                                {
                                    menus.map((menu => {
                                        return (
                                            <Menu.Item key={menu.menuId + ""}>
                                                <Link to={menu.url}>{menu.menuName}</Link>
                                            </Menu.Item>
                                        );
                                    }))
                                }
                            </Menu>
                        </Header>
                        {(() => {
                            if (sideMenus.length == 0) {
                                return (
                                    <Layout>
                                        {this.props.app.isDisplayBreadcrumb ? <Breadcrumb routes={this.props.app.routes} itemRender={this.itemRender}
                                            style={{ margin: '12px 0' }}></Breadcrumb> : ''}
                                        <Content
                                            style={{ background: '#fff', padding: '20px 24px 0 24px', margin: 0, minHeight: 280 }}>
                                            {this.props.children}
                                        </Content>
                                    </Layout>
                                );
                            } else {
                                return (
                                    <Layout>
                                        <Sider width={200} style={{ background: '#fff' }}>
                                            {
                                                sideMenus.length > 0 ? (() => {
                                                    return (
                                                        <Menu
                                                            mode="inline"
                                                            selectedKeys={selectMenus}
                                                            defaultOpenKeys={selectOpenMenu}
                                                            style={{ height: '100%' }}
                                                        >
                                                            {
                                                                sideMenus.map(menu => {
                                                                    if (menu.children.length > 0) {
                                                                        return (
                                                                            <SubMenu key={menu.menuId + ""} title={<span><i
                                                                                className={`iconfont icon-${menu.icon}`} /> {menu.menuName}</span>}>
                                                                                {
                                                                                    menu.children.map(menu => {
                                                                                        return (
                                                                                            <Menu.Item key={menu.menuId + ""}><Link
                                                                                                to={menu.url}><i
                                                                                                    className={`iconfont icon-${menu.icon}`} /> {menu.menuName}
                                                                                            </Link></Menu.Item>);
                                                                                    })
                                                                                }
                                                                            </SubMenu>
                                                                        );
                                                                    }
                                                                    return (<Menu.Item key={menu.menuId + ""}><Link to={menu.url}><i
                                                                        className={`iconfont icon-${menu.icon}`} /> {menu.menuName}
                                                                    </Link></Menu.Item>);
                                                                })
                                                            }
                                                        </Menu>
                                                    );
                                                })() : ''
                                            }
                                        </Sider>
                                        <Layout style={{ padding: '0 24px 24px' }}>
                                            {this.props.app.isDisplayBreadcrumb ? <Breadcrumb routes={this.props.routes} itemRender={this.itemRender}
                                                style={{ margin: '12px 0' }}></Breadcrumb> : ''}

                                            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
                                                {this.props.children}
                                            </Content>
                                        </Layout>
                                    </Layout>
                                );
                            }
                        })()}
                    </Layout>
                    <UserInfo wrappedComponentRef={(inst) => this.userInfo = inst} dispatch={this.props.dispatch} />
                    <ResetPassword wrappedComponentRef={(inst) => this.resetPassword = inst} dispatch={this.props.dispatch} />
                </div>
            )
        }
    })
